import { defineComponent } from 'vue'
import { observer } from '@formily/reactive-vue'
import { usePrefix, IconWidget, TextWidget } from '@pg/prototypes'
import { INodeItem, ITreeDataSource } from './types'
import './styles.less'
export interface ITitleProps extends INodeItem {
  treeDataSource: ITreeDataSource
}

export const Title = observer(
  defineComponent({
    props: ['value', 'prop'],
    setup(props, { emit }) {
      const prefix = usePrefix('data-source-setter-node-title')
      const renderTitle = () => {
        return (
          props.value[props.prop] || <TextWidget token="SettingComponents.DataSourceSetter.defaultTitle"/>
        )
      }

      return () => (
        <div class={prefix.value}>
          <span style={{marginRight: '5px'}}>
            {renderTitle()}
          </span>
          <IconWidget
            class={prefix.value + '-icon'}
            infer="Remove"
            onClick={() => {
              emit('remove', props.value)
            }}
          />
        </div>
      )
    }
  })
)
